<template>
  <div class="smart-crop-page">
    <div class="page-header">
      <h1 class="page-title">智能剪辑</h1>
      <p class="page-description">AI智能识别并剪辑图片中的主要对象，支持背景移除、对象提取等功能</p>
    </div>

    <div class="main-content">
      <!-- 左侧工具栏 -->
      <div class="tool-panel">
        <div class="tool-section">
          <h3 class="tool-title">上传图片</h3>
          <div class="upload-area" @click="triggerUpload">
            <input 
              ref="fileInput" 
              type="file" 
              accept="image/*" 
              @change="handleImageUpload"
              style="display: none"
            />
            <div class="upload-content">
              <div class="upload-icon">📷</div>
              <p>点击上传图片</p>
              <span class="upload-hint">支持 JPG、PNG 格式</span>
            </div>
          </div>
        </div>

        <div class="tool-section">
          <h3 class="tool-title">剪辑工具</h3>
          <div class="tool-buttons">
            <button 
              v-for="tool in tools" 
              :key="tool.id"
              :class="['tool-btn', { active: selectedTool === tool.id }]"
              @click="selectTool(tool.id)"
            >
              <span class="tool-icon">{{ tool.icon }}</span>
              <span class="tool-name">{{ tool.name }}</span>
            </button>
          </div>
        </div>

        <div class="tool-section">
          <h3 class="tool-title">画笔大小</h3>
          <div class="brush-controls">
            <input 
              v-model="brushSize" 
              type="range" 
              min="10" 
              max="100" 
              class="brush-slider"
            />
            <span class="brush-size-display">{{ brushSize }}px</span>
          </div>
        </div>

        <div class="tool-section">
          <div class="action-buttons">
            <button class="action-btn primary" @click="processImage" :disabled="!hasImage">
              开始处理
            </button>
            <button class="action-btn" @click="resetCanvas" :disabled="!hasImage">
              重置
            </button>
            <button class="action-btn" @click="downloadResult" :disabled="!processedImage">
              下载结果
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧画布区域 -->
      <div class="canvas-area">
        <div class="canvas-container" ref="canvasContainer">
          <canvas 
            ref="mainCanvas" 
            class="main-canvas"
            @mousedown="startDraw"
            @mousemove="onMouseMove"
            @mouseup="endDraw"
            @mouseleave="endDraw"
          ></canvas>
          <canvas 
            ref="maskCanvas" 
            class="mask-canvas"
          ></canvas>
          
          <!-- 光标指示器 -->
          <div
            v-if="cursor.visible && hasImage"
            class="cursor-indicator"
            :style="{
              top: `${cursor.y}px`,
              left: `${cursor.x}px`,
              width: `${brushSize}px`,
              height: `${brushSize}px`,
            }"
          ></div>
        </div>

        <!-- 结果预览 -->
        <div v-if="processedImage" class="result-preview">
          <h3>处理结果</h3>
          <img :src="processedImage" alt="处理结果" class="result-image" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartCrop',
  data() {
    return {
      selectedTool: 'select',
      brushSize: 30,
      hasImage: false,
      processedImage: null,
      isDrawing: false,
      cursor: { x: 0, y: 0, visible: false },
      
      tools: [
        { id: 'select', name: '智能选择', icon: '🎯' },
        { id: 'brush', name: '画笔', icon: '🖌️' },
        { id: 'eraser', name: '橡皮擦', icon: '🧽' },
        { id: 'magic', name: '魔法棒', icon: '✨' }
      ],

      canvasSize: { width: 600, height: 400 },
      imageData: null
    }
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const container = this.$refs.canvasContainer;
      const mainCanvas = this.$refs.mainCanvas;
      const maskCanvas = this.$refs.maskCanvas;
      
      if (container && mainCanvas && maskCanvas) {
        const { width, height } = this.canvasSize;
        mainCanvas.width = width;
        mainCanvas.height = height;
        maskCanvas.width = width;
        maskCanvas.height = height;
        
        this.mainCtx = mainCanvas.getContext('2d');
        this.maskCtx = maskCanvas.getContext('2d');
      }
    },
    
    triggerUpload() {
      this.$refs.fileInput.click();
    },
    
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.loadImage(e.target.result);
        };
        reader.readAsDataURL(file);
      }
    },
    
    loadImage(src) {
      const img = new Image();
      img.onload = () => {
        this.drawImageToCanvas(img);
        this.hasImage = true;
        this.imageData = img;
      };
      img.src = src;
    },
    
    drawImageToCanvas(img) {
      const { width, height } = this.canvasSize;
      const ctx = this.mainCtx;
      
      // 清空画布
      ctx.clearRect(0, 0, width, height);
      
      // 计算适配尺寸
      const scale = Math.min(width / img.width, height / img.height);
      const scaledWidth = img.width * scale;
      const scaledHeight = img.height * scale;
      const x = (width - scaledWidth) / 2;
      const y = (height - scaledHeight) / 2;
      
      // 绘制图片
      ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
    },
    
    selectTool(toolId) {
      this.selectedTool = toolId;
    },
    
    startDraw(e) {
      if (!this.hasImage) return;
      
      this.isDrawing = true;
      const rect = this.$refs.maskCanvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      this.maskCtx.beginPath();
      this.maskCtx.moveTo(x, y);
      this.setupBrush();
    },
    
    onMouseMove(e) {
      const rect = this.$refs.maskCanvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      this.cursor = { x, y, visible: this.hasImage };
      
      if (this.isDrawing) {
        this.maskCtx.lineTo(x, y);
        this.maskCtx.stroke();
      }
    },
    
    endDraw() {
      if (this.isDrawing) {
        this.isDrawing = false;
        this.maskCtx.closePath();
      }
    },
    
    setupBrush() {
      this.maskCtx.lineWidth = this.brushSize;
      this.maskCtx.lineCap = 'round';
      this.maskCtx.lineJoin = 'round';
      
      if (this.selectedTool === 'eraser') {
        this.maskCtx.globalCompositeOperation = 'destination-out';
      } else {
        this.maskCtx.globalCompositeOperation = 'source-over';
        this.maskCtx.strokeStyle = 'rgba(255, 255, 0, 0.5)';
      }
    },
    
    processImage() {
      if (!this.hasImage) return;
      
      // 模拟AI处理过程
      setTimeout(() => {
        // 这里应该调用实际的AI处理API
        this.processedImage = this.generateMockResult();
      }, 2000);
    },
    
    generateMockResult() {
      // 创建一个模拟的处理结果
      const canvas = document.createElement('canvas');
      canvas.width = this.canvasSize.width;
      canvas.height = this.canvasSize.height;
      const ctx = canvas.getContext('2d');
      
      // 复制原图
      ctx.drawImage(this.$refs.mainCanvas, 0, 0);
      
      // 添加一些处理效果
      ctx.fillStyle = 'rgba(0, 255, 0, 0.1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      return canvas.toDataURL();
    },
    
    resetCanvas() {
      if (this.maskCtx) {
        this.maskCtx.clearRect(0, 0, this.canvasSize.width, this.canvasSize.height);
      }
      this.processedImage = null;
    },
    
    downloadResult() {
      if (this.processedImage) {
        const link = document.createElement('a');
        link.download = 'smart_crop_result.png';
        link.href = this.processedImage;
        link.click();
      }
    }
  }
}
</script>

<style scoped>
.smart-crop-page {
  padding: 1.5rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 1rem;
}

.page-description {
  font-size: 1.1rem;
  color: #718096;
  max-width: 600px;
  margin: 0 auto;
}

.main-content {
  display: flex;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.tool-panel {
  width: 280px;
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.tool-section {
  margin-bottom: 2rem;
}

.tool-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1rem;
}

.upload-area {
  border: 2px dashed #cbd5e0;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #4299e1;
  background-color: #f7fafc;
}

.upload-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.upload-hint {
  font-size: 0.875rem;
  color: #a0aec0;
}

.tool-buttons {
  display: grid;
  gap: 0.5rem;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tool-btn:hover {
  border-color: #4299e1;
  background-color: #f7fafc;
}

.tool-btn.active {
  border-color: #4299e1;
  background-color: #ebf8ff;
  color: #2b6cb0;
}

.tool-icon {
  font-size: 1.25rem;
}

.brush-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brush-slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  outline: none;
}

.brush-size-display {
  font-weight: 600;
  color: #4a5568;
  min-width: 45px;
}

.action-buttons {
  display: grid;
  gap: 0.75rem;
}

.action-btn {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.action-btn.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.action-btn:not(.primary) {
  background: #f7fafc;
  color: #4a5568;
  border: 1px solid #e2e8f0;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.canvas-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.canvas-container {
  position: relative;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: fit-content;
  margin: 0 auto;
}

.main-canvas, .mask-canvas {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
}

.mask-canvas {
  opacity: 0.7;
  pointer-events: none;
}

.cursor-indicator {
  position: absolute;
  border: 2px solid #4299e1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 0 10px rgba(66, 153, 225, 0.3);
}

.result-preview {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.result-image {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .tool-panel {
    width: 100%;
  }
  
  .page-title {
    font-size: 2rem;
  }
}
</style> 
